<template>
  <div class="app-container" v-loading="data.mtloading">
    <el-tabs v-model="editableTabsValue" type="card"
      :class="locale == 'en' ? 'demo-tabsLang_en demo-tabsLang' : 'demo-tabsLang'" @tab-change="onTabLang">
      <el-tab-pane :disabled="!data.info.g_id && !isField" v-for="item in tabLangList" :key="item.lang"
        :label="locale == 'en' ? item.lang == 'zh-cn' ? $t('message.DefaultData') : item.lang : item.name"
        :name="item.lang">
      </el-tab-pane>
    </el-tabs>
    <el-form :model="data.info" :rules="data.rules" class="w-full mt-4 float-left"
      :label-width="language == 'en' ? '165px' : '120px'" ref="ruleFormRef">
      <div class="border border-[#4B8DF8]">
        <div class="bg-[#4B8DF8] p-2.5 text-[#fafafa] text-lg">
          {{ $t("goods.list.step") }}：{{ $t("machine.configs.basic") }}
        </div>
        <div class="pt-4">
          <el-form-item :label="$t('machine.goods.name') + ':'" :prop="!isField ? 'g_name' : ''" class="w-1/2">
            <el-input v-model="data.info.g_name" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>

          <el-form-item :label="$t('machine.goods.pic') + ':'" :prop="!isField ? 'pic' : ''" class="w-1/2">
            <el-input v-model="data.info.pic" :placeholder="$t('message.pleaseEnter')" readonly>
              <template #append>
                <Upload :list="{ data: 'goods', list: false }" :type="1" :uptype="2" @exposeData="expose" />
              </template>
              <template #suffix>
                <el-icon class="ml-2" size="20" @click="urlimg(data.info.pic, 1)">
                  <Picture />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item :label="$t('machine.goods.class') + ':'" :prop="!isField ? 'gc_id' : ''" class="w-1/2">
            <el-cascader v-model="data.info.gc_id" :options="data.typelist" :props="{ checkStrictly: true }" filterable
              clearable class="w-full" />
          </el-form-item>

          <el-form-item :label="$t('machine.goods.marque') + ':'" prop="model" class="w-1/2" v-if="!isField">
            <el-input v-model="data.info.model" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>

          <el-form-item :label="$t('machine.goods.type') + ':'" prop="g_type" class="w-1/2" v-if="!isField">
            <el-select v-model="data.info.g_type" :placeholder="$t('message.pleaseSelect')" clearable filterable
              @change="changeSelect">
              <el-option v-for="item in getPlevel.gType_list" :key="item.value" :label="$t(item.label)"
                :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('machine.goods.barCode') + ':'" prop="bar_code" class="w-1/2" v-if="!isField">
            <el-input v-model="data.info.bar_code" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>

          <el-form-item label="SKU:" prop="sku" class="w-1/2" v-if="!isField">
            <el-input v-model="data.info.sku" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>

          <el-form-item :label="$t('machine.goods.associate') + 'SKU:'" prop="sku2" class="w-1/2" v-if="!isField">
            <el-input v-model="data.info.sku2" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>

          <el-form-item :label="$t('machine.goods.costPrice') + ':'" prop="cost_price" class="w-1/2" v-if="!isField">
            <el-input v-model="data.info.cost_price" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>

          <el-form-item :label="$t('machine.goods.marketValue') + ':'" prop="market_price" class="w-1/2"
            v-if="!isField">
            <el-input v-model="data.info.market_price" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>

          <el-form-item :label="$t('machine.goods.retailPrice') + ':'" prop="retail_price" class="w-1/2"
            v-if="!isField">
            <el-input v-model="data.info.retail_price" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>

          <el-form-item :label="$t('machine.goods.manufacturer') + ':'" :prop="!isField ? 'manufacturer' : ''"
            class="w-1/2">
            <el-input v-model="data.info.manufacturer" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>

          <el-form-item :label="$t('machine.goods.phone') + ':'" prop="service_phone" class="w-1/2" v-if="!isField">
            <el-input v-model="data.info.service_phone" maxlength="11" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>
          <el-form-item :label="$t('machine.goods.bannerPic') + ':'" prop="banner">
            <Upload :list="{ data: 'goods_banner', list: false }" :type="1" :uptype="6" @exposeData="exposes" />
            <div class="w-20 ml-4 relative" @mouseenter="handleMouseEnter(index, 1)" @mouseleave="handleMouseLeave(1)"
              v-for="(item, index) in data.uploadUrl" :key="index">
              <img :src="item" alt="" />
              <div v-if="uploadIndex == index" class="flex absolute top-0 left-0 bg-[#808585ad] bottom-0 right-0">
                <div class="self-center ml-8" @click="onDel(index, 1)">
                  <el-icon>
                    <DeleteFilled color="#fff" />
                  </el-icon>
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item :label="$t('machine.goods.detailsPic') + ':'" prop="details_pic">
            <Upload :list="{ data: 'goods_banner', list: false }" :type="1" :uptype="6" @exposeData="exposeDetails" />
            <div class="w-20 ml-4 relative" @mouseenter="handleMouseEnter(index, 2)" @mouseleave="handleMouseLeave(2)"
              v-for="(item, index) in data.detailsUrl" :key="index">
              <img :src="item" alt="" />
              <div v-if="detailsIndex == index" class="flex absolute top-0 left-0 bg-[#808585ad] bottom-0 right-0">
                <div class="self-center ml-8" @click="onDel(index, 2)">
                  <el-icon>
                    <DeleteFilled color="#fff" />
                  </el-icon>
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item :label="$t('goods.list.desc') + ':'" prop="desc" class="w-full">
            <Editor v-model="data.info.desc" />
          </el-form-item>
        </div>
      </div>

      <div class="border border-[#FFB848] mt-6">
        <div class="bg-[#FFB848] p-2.5 text-[#fafafa] text-lg">
          {{ $t("goods.list.performance") }}
        </div>
        <div class="p-2 pt-4">
          <el-tag v-for="item of data.performance" type="warning" class="m-2 cursor-pointer" size="large"
            @click="addmance(item)">
            {{ item.cp_id }}-{{ item.name || $t("machine.types.undefined") }}
          </el-tag>
          <draggable :list="data.mancelist" item-key="cp_id" group="people">
            <template #item="item">
              <div class="border pb-4 mb-2">
                <div class="w-full relative flex flex-wrap ml-2 mt-4">
                  <div class="w-2/12">
                    <el-input v-model="item.element.name" placeholder="请输入名称" />
                  </div>
                  <div class="w-2/12 ml-4">
                    <el-input v-model="item.element.variable" :placeholder="$t('message.pleaseFields')" />
                  </div>
                  <div class="w-4/12 ml-4">
                    <el-input v-model="item.element.value" :placeholder="$t('message.pleaseContents')" />
                  </div>
                  <div class="w-2/12 ml-4">
                    <el-select v-model="item.element.lang" :placeholder="$t('message.pleaseSelect')" filterable>
                      <el-option v-for="item in data.langarr" :key="item.l_id"
                        :label="item.name + '(' + item.lang + ')'" :value="item.lang" />
                    </el-select>
                  </div>
                  <div class="ml-4 mt-1">
                    <el-link type="danger" :underline="false" @click="dels(item.index)">{{ $t("public.del") }}</el-link>
                  </div>
                </div>
              </div>
            </template>
          </draggable>
          <div class="ml-2 mt-4">
            <el-tag class="cursor-pointer" type="warning" size="large" effect="dark" @click="setmance">
              {{ $t("goods.list.addPerformance") }}
            </el-tag>
          </div>
        </div>
      </div>

      <div class="border border-[#AF5CC1] mt-6" v-if="!isField">
        <div class="bg-[#AF5CC1] p-2.5 text-[#fafafa] text-lg">
          {{ $t("goods.list.optional") }}
        </div>
        <div class="p-2 pt-4">
          <el-form-item :label="$t('goods.list.distribution') + ':'" prop="sell_channel" class="w-1/2">
            <el-radio-group v-model="data.info.sell_channel">
              <el-radio :value="1" :label="1">{{
                $t("goods.list.machine")
              }}</el-radio>
              <el-radio :value="2" :label="2"> {{ $t("goods.list.mall") }}</el-radio>
              <el-radio :value="3" :label="3">{{ $t("goods.list.machine") }} +
                {{ $t("goods.list.mall") }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="data.info.sell_channel > 1" :label="'外部购买图片:'" class="w-1/2">
            <el-input v-model="data.info.exter_url" :placeholder="$t('message.pleaseEnter')" readonly>
              <template #append>
                <Upload :list="{ data: 'goods', list: false }" :type="1" :uptype="2" @exposeData="exposesCode" />
              </template>
              <template #suffix>
                <el-icon class="ml-2" size="20" @click="urlimg(data.info.exter_url, 2)">
                  <Picture />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('goods.list.status') + ':'" prop="status" class="w-1/2">
            <el-radio-group v-model="data.info.status">
              <el-radio :value="1" :label="1">{{
                $t("public.enable")
              }}</el-radio>
              <el-radio :value="2" :label="2">{{
                $t("public.disable")
              }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="$t('goods.list.allow') + ':'" prop="heat" class="w-1/2">
            <el-radio-group v-model="data.info.heat">
              <el-radio :value="0" :label="0">{{
                $t("goods.list.notHeated")
              }}</el-radio>
              <el-radio :value="1" :label="1">{{
                $t("goods.list.grade1")
              }}</el-radio>
              <el-radio :value="2" :label="2">{{
                $t("goods.list.grade2")
              }}</el-radio>
              <el-radio :value="3" :label="3">{{
                $t("goods.list.grade3")
              }}</el-radio>
              <el-radio :value="4" :label="4">{{
                $t("goods.list.grade4")
              }}</el-radio>
              <el-radio :value="5" :label="5">{{
                $t("goods.list.grade5")
              }}</el-radio>
              <el-radio :value="6" :label="6">{{
                $t("goods.list.grade6")
              }}</el-radio>
              <el-radio :value="7" :label="7">{{
                $t("goods.list.grade7")
              }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="$t('goods.list.validity') + ':'" prop="is_recommend" class="w-1/2">
            <el-radio-group v-model="data.term">
              <el-radio :value="1" :label="1">{{ $t("public.open") }}</el-radio>
              <el-radio :value="2" :label="2">{{
                $t("public.close")
              }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="data.term == 1" :label="$t('goods.list.period') + ':'" prop="expire_notice" class="w-1/2">
            <el-input v-model="data.info.expire_notice" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>

          <el-form-item :label="$t('machine.configs.recommendingGood') + ':'" prop="is_recommend" class="w-1/2">
            <el-radio-group v-model="data.info.is_recommend">
              <el-radio :value="1" :label="1">{{ $t("public.open") }}</el-radio>
              <el-radio :value="2" :label="2">{{
                $t("public.close")
              }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="$t('goods.list.gift') + ':'" prop="is_gift" class="w-1/2">
            <el-radio-group v-model="data.info.is_gift">
              <el-radio :value="1" :label="1">{{ $t("public.yes") }}</el-radio>
              <el-radio :value="2" :label="2">{{ $t("public.no") }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="$t('goods.list.pack') + ':'" prop="length" class="w-11/12">
            <div class="w-full relative flex flex-wrap">
              <div class="w-3/12 mr-2">
                <el-input v-model="data.info.length" :placeholder="$t('message.pleaseEnter')">
                  <template #append>
                    mm/{{ $t("goods.list.length") }}
                  </template>
                </el-input>
              </div>
              X
              <div class="w-3/12 ml-2 mr-2">
                <el-input v-model="data.info.width" :placeholder="$t('message.pleaseEnter')">
                  <template #append> mm/{{ $t("goods.list.width") }} </template>
                </el-input>
              </div>
              X
              <div class="w-3/12 ml-2 mr-2">
                <el-input v-model="data.info.height" :placeholder="$t('message.pleaseEnter')">
                  <template #append>
                    mm/{{ $t("goods.list.height") }}
                  </template>
                </el-input>
              </div>
            </div>
          </el-form-item>

          <el-form-item :label="$t('goods.list.groupNum') + ':'" prop="group_quantity" class="w-1/2">
            <el-input v-model="data.info.group_quantity" :placeholder="$t('message.pleaseEnter')" />
          </el-form-item>

          <el-form-item :label="$t('goods.list.recyclable') + ':'" prop="recoverable" class="w-1/2">
            <el-radio-group v-model="data.info.recoverable">
              <el-radio :value="1" :label="1">{{ $t("public.yes") }}</el-radio>
              <el-radio :value="2" :label="2">{{ $t("public.no") }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="$t('date.saleTime') + ':'" prop="release_time" class="w-1/2">
            <el-date-picker v-model="data.info.release_time" :disabled-date="disabledDate" type="date"
              :placeholder="$t('message.pleaseSelect')" format="YYYY/MM/DD" value-format="x" style="width: 100%" />
          </el-form-item>
        </div>
      </div>

      <div class="w-full text-left mt-4 ml-6">
        <div class="inline-block" v-if="!isField">
          <el-button type="primary" size="small" @click="submit(ruleFormRef)">
            <template #default>
              <span class="text-sm">{{ $t("public.save") }}</span>
            </template>
          </el-button>

          <el-button size="small" @click="cancell" v-if="!isField">
            <template #default>
              <span class="text-sm">{{ $t("public.cancel") }}</span>
            </template>
          </el-button>
        </div>
        <div class="inline-block" v-else>
          <el-button type="primary" size="small" @click="onSave(ruleFormRef)">
            <template #default>
              <span class="text-sm">{{ $t("public.save") }}</span>
            </template>
          </el-button>
          <el-button size="small" @click="onDelLang(ruleFormRef)" v-if="isField">
            <template #default>
              <span class="text-sm">{{ $t("public.del") }}</span>
            </template>
          </el-button>
        </div>
      </div>
    </el-form>

    <!-- 图片展示 -->
    <el-dialog v-model="data.demonstrate" center width="30%">
      <div class="flex justify-center">
        <el-image class="max-w-80" v-if="data.demonstrate == 1" :src="data.info.pic" fit="fill" />
        <el-image class="max-w-80" v-if="data.demonstrate == 2" :src="data.info.exter_url" fit="fill" />
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { t: $t, locale } = useI18n();
import getPlevel from "@/utils/level";
import Upload from "@/components/Upload/index.vue";
import Editor from "@/components/Editor/index.vue";
import draggable from "vuedraggable";
import { getgoodsFind } from "@/api/goods";
import { getperform, getlang } from "@/api/manage";
import {
  getListcategory,
  updategoods,
  goods_lang,
  updategoods_lang,
  addgoods_lang,
  delgoods_lang,
} from "@/api/goods";
import { useRouter, useRoute } from "vue-router";
import { onMounted } from "vue";
let editableTabsValue = ref("zh-cn");
const tabLangList = ref([]);
let isField = ref(false);
let language = ref();
onMounted(() => {
  language.value = locale.value;
});
let ruleFormRef = ref<any>();
const router = useRouter();
const route = useRoute();
const detailsIndex = ref();
const uploadIndex = ref();
let data = reactive({
  goodsLangList: [],
  LangList: [],
  rowLang: "",
  detailsUrl: [],
  uploadUrl: [],
  mtloading: false, // 加载
  demonstrate: 0, // 图片弹窗
  typelist: [], // 商品分类
  goodstype: "", // 原始数据-分类
  performance: [], // 性能参数
  mancelist: [], // 性能参数列表
  langarr: [], // 语言列表
  term: 2, // 有限期开关，1开，2关
  info: {
  }, // 商品主体信息
  rules: {
    // 表单验证
    g_name: {
      required: true,
      message: $t("message.pleaseEnter"),
      trigger: "blur",
    },
    gc_id: {
      required: true,
      message: $t("message.pleaseSelect"),
      trigger: "change",
    },
    model: {
      required: true,
      message: $t("message.pleaseEnter"),
      trigger: "blur",
    },
    bar_code: {
      required: true,
      message: $t("message.pleaseEnter"),
      trigger: "blur",
    },
    sku: {
      required: true,
      message: $t("message.pleaseEnter"),
      trigger: "blur",
    },
    pic: {
      required: true,
      message: $t("message.pleaseUpload"),
      trigger: "blur",
    },
    cost_price: {
      required: true,
      message: $t("message.pleaseEnter"),
      trigger: "blur",
    },
    market_price: {
      required: true,
      message: $t("message.pleaseEnter"),
      trigger: "blur",
    },
    retail_price: {
      required: true,
      message: $t("message.pleaseEnter"),
      trigger: "blur",
    },
    manufacturer: {
      required: true,
      message: $t("message.pleaseEnter"),
      trigger: "blur",
    },
  },
  findList: {},
});
onMounted(() => {
  getFind();
});
let onDelLang = () => {
  ElMessageBox.confirm($t("message.delData"))
    .then((res) => {
      let obj = {
        gl_id: data.goodsLangList[0].gl_id,
      };
      delgoods_lang(obj).then((res) => {
        if (res.state == 200) {
          ElMessage({
            message: $t("message.delSuccess"),
            type: "success",
          });
          data.info = {};
          data.uploadUrl = []
          data.detailsUrl = []
          data.info.desc = ""
          data.mancelist = []
          infoLang();
          return;
        }
        ElMessage({
          message: $t("message.networkFailed"),
          type: "error",
        });
      });
    })
    .catch((err) => {
      console.log("取消");
    });
};
let onSave = () => {
  let obj = {
    g_id: String(route.query.id),
    g_name: data.info.g_name,
    gc_id: '',
    gc_name: '',
    pic: data.info.pic,
    banner: '',
    details_pic: '',
    manufacturer: data.info.manufacturer,
    desc: data.info.desc,
    performance: '',
    lang: data.rowLang
  }
  let type = JSON.parse(data.goodstype);
  let mancearr = [];
  if (typeof obj.gc_id != "number" && data.info.gc_id) {
    obj.gc_id = data.info.gc_id[data.info.gc_id.length - 1] || "";
    for (let item of type) {
      if (item.gc_id == obj.gc_id) {
        obj.gc_name = item.gc_name;
      }
    }
  }

  for (let item of data.mancelist) {
    if (item.name != "" && item.value != "") {
      mancearr.push({
        name: item.name,
        variable: item.variable,
        value: item.value,
        lang: item.lang,
      })
    }
  }

  obj.performance = JSON.stringify(mancearr)
  obj.details_pic = data.detailsUrl.join(";")
  obj.banner = data.uploadUrl.join(";");
  // 添加
  if (!data.goodsLangList.length) {
    addgoods_lang(obj).then((res) => {
      ElMessage({
        message: $t("message.addSuccess"),
        type: "success",
      });
      infoLang();
    });
  }
  // 编辑
  if (data.goodsLangList.length && data.goodsLangList[0].gl_id) {
    obj.gl_id = data.goodsLangList[0].gl_id;
    updategoods_lang(obj).then((res) => {
      ElMessage({
        message: $t("message.modifySuccess"),
        type: "success",
      });
      infoLang();
    });
  }
};
let onTabLang = (value: string) => {
  if (value == "zh-cn") {
    getFind();
    isField.value = false;
    return;
  }
  data.rowLang = value;
  isField.value = true
  data.goodsLangList = data.LangList.filter((item) => value == item.lang);
  if (data.goodsLangList.length) {
    data.info = {};
    data.uploadUrl = [];
    data.detailsUrl = data.goodsLangList[0].details_pic.split(';');
    data.uploadUrl = data.goodsLangList[0].banner.split(';')
    data.mancelist = JSON.parse(data.goodsLangList[0].performance)
    data.info.gc_id = data.goodsLangList[0].gc_id
    data.info = data.goodsLangList[0];
  } else {
    data.info = {};
    data.uploadUrl = []
    data.detailsUrl = []
    data.info.desc = ""
    data.mancelist = []
  }
};
let infoLang = () => {
  let id = route.query.id;
  let parm = {
    g_id: id,
  };
  goods_lang(parm).then((res) => {
    if (res.state == 200) {
      data.LangList = res.data;
    }
  });
};
let findGetlang = () => {
  getlang({}).then((res) => {
    if (res.state == 200) {
      res.data.forEach((item) => {
        if (item.lang == "zh-cn") {
          item.name = $t('message.DefaultData')
        }
      });
      tabLangList.value = res.data;
    }
  });
};
findGetlang();
infoLang();

let exposes = (e) => {
  if (e.status == 200) {
    data.uploadUrl.push(e.file.response.data);
  }
};

let exposeDetails = (e) => {
  if (e.status == 200) {
    data.detailsUrl.push(e.file.response.data);
  }
};
let handleMouseEnter = (index: number, flng: number) => {
  if (flng == 1) {
    uploadIndex.value = index;
  }
  if (flng == 2) {
    detailsIndex.value = index;
  }
};
let handleMouseLeave = (flng: number) => {
  if (flng == 1) {
    uploadIndex.value = null;
  }
  if (flng == 2) {
    detailsIndex.value = null;
  }
};
let onDel = (index: number, flng: number) => {
  if (flng == 1) {
    data.uploadUrl.splice(index, 1);
  }
  if (flng == 2) {
    data.detailsUrl.splice(index, 1);
  }
};
let getFind = () => {
  let id = route.query.id;
  getgoodsFind({ g_id: id }).then((res) => {
    if (res.state == 200) {
      data.uploadUrl = !res.data.banner ? [] : res.data.banner.split(";");
      data.detailsUrl = !res.data.details_pic
        ? []
        : res.data.details_pic.split(";");
      data.findList = res.data;
      getinfo();
    }
  });
};
let cancell = () => {
  router.back();
  getinfo();
};
// 获取信息
let getinfo = () => {
  data.info = data.findList;
  // 性能列表
  if (data.info.performance != "" && data.info.performance != null) {
    let arr = JSON.parse(data.info.performance);
    let num = 0;
    for (let item of arr) {
      num++;
      item.cp_id = new Date().getTime() + num;
    }
    data.mancelist = arr;
  }

  // 日期
  if (data.info.release_time != "" && data.info.release_time != null) {
    data.info.release_time = data.info.release_time * 1000;
  }

  if (data.info.expire_notice > 0) {
    data.term = 1;
  }
};

// 获取接口信息
let geturlinfo = () => {
  data.typelist = [];
  let select = [];
  // 获取分类信息
  getListcategory().then((res) => {
    if (res.state == 200) {
      data.goodstype = JSON.stringify(res.data);
      for (let item of res.data) {
        select.push({
          label: item.gc_id + "-" + item.gc_name,
          value: item.gc_id,
          gc_pid: item.gc_pid,
          children: [],
        });
      }
      select.forEach((item) => {
        select.find((ime) => {
          if (ime.gc_pid == item.value) {
            item.children.push(ime);
          }
        });
      });
      for (let item of select) {
        if (item.gc_pid == 0) {
          data.typelist.push(item);
        }
      }
    }
  });

  // 获取性能参数
  getperform().then((res) => {
    if (res.state == 200) {
      data.performance = res.data;
    }
  });

  // 获取语言列表
  getlang().then((res) => {
    if (res.state == 200) {
      data.langarr = res.data;
    }
  });
};

// 点击性能参数
let addmance = (e) => {
  data.mancelist.push({
    cp_id: e.cp_id,
    name: e.name,
    variable: e.field,
    lang: e.lang,
    value: "",
  });
};

// 删除性能参数
let dels = (e) => {
  data.mancelist.splice(e, 1);
};

// 添加自定义性能
let setmance = () => {
  // 因空的cp_id会导致拖动时产生BUG
  // 因此添加自定义性能时，采用时间戳当cp_id
  // 如有更优方案可代替时间戳，欢迎修改调整
  // DKM 启上
  data.mancelist.push({
    // cp_id: '', // 产生BUG
    cp_id: new Date().getTime(),
    name: "",
    lang: data.langarr[0].lang,
    value: "",
  });
};

// 日期选择
let disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 3600 * 1000 * 24 * 1;
};

// 上传返回
let expose = (e) => {
  if (e.status == 200) {
    data.info.pic = e.file.response.data;
  } else {
    data.info.pic = "";
  }
};
// 上传返回二维码
let exposesCode = (e) => {
  if (e.status == 200) {
    data.info.exter_url = e.file.response.data;
  } else {
    data.info.exter_url = "";
  }
};

// 查看图片
let urlimg = (e, i) => {
  if (e == "") {
    return;
  }
  data.demonstrate = i;
};

// 保存
let submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      let obj = data.findList;
      let type = JSON.parse(data.goodstype);
      let mancearr = [];
      obj.release_time = "";

      for (let key in obj) {
        if (key != "performance" && key != "release_time") {
          obj[key] = data.info[key];
        }
      }

      if (typeof obj.gc_id != "number") {
        obj.gc_id = data.info.gc_id[data.info.gc_id.length - 1] || "";
        for (let item of type) {
          if (item.gc_id == obj.gc_id) {
            obj.gc_name = item.gc_name;
          }
        }
      }

      for (let item of data.mancelist) {
        if (item.name != "" && item.value != "") {
          mancearr.push({
            name: item.name,
            variable: item.variable,
            value: item.value,
            lang: item.lang,
          });
        }
      }

      if (data.term == 1) {
        if (obj.expire_notice == 0 || obj.expire_notice == "") {
          ElMessage({
            message: $t("message.pleaseEnterdate"),
            type: "error",
          });
          return;
        }
      } else {
        obj.expire_notice = 0;
      }

      obj.performance = JSON.stringify(mancearr);

      if (data.info.release_time != "" && data.info.release_time != null) {
        obj.release_time = Math.floor(data.info.release_time / 1000);
      }
      obj.details_pic = data.detailsUrl.join(";");
      obj.banner = data.uploadUrl.join(";");
      console.log(obj);
      updategoods(obj).then((res) => {
        data.mtloading = false;
        if (res.state == 200) {
          ElMessage({
            message: $t("message.modifySuccess"),
            type: "success",
          });
          router.back();
          return;
        }
        ElMessage({
          message: $t("message.networkFailed"),
          type: "error",
        });
      });
    }
  });
};

geturlinfo();
</script>
<style lang="scss">
.demo-tabsLang_en {
  width: 270px !important;
}

.demo-tabsLang {
  width: 340px;
  float: right;
}

.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  background-color: #409eff;
  color: #fff;
}
</style>
